<template>
  <div>

    <el-card class="box-card">

      <el-form ref="form" :model="account" label-width="100px">
        <el-form-item label="账号" >
          <el-input v-model="account.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="account.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登录</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>

    </el-card>

  </div>
</template>

<script>
    export default {
        name: "loginTest",
        data() {
            return {
                account: {
                    name: '',
                    password: '',
                }
            }
        },
        methods: {
            login() {
                this.$router.push("/pagehome")
            }
        }
    }
</script>

<script>
    export default {
        name: "login",
        data() {
            return{
                userInfo:{},
            }
        },
        methods:{
            test(){
                //存储全局this
                const that = this
                //发送请求
                that.$axios.get('/login').then(res =>{
                    //当得到请求数据是，this将会变为局部的，也就是只能this.服务器返回的数据，
                    // 不能调用全局的方法等等，所以要事先存储全局的this
                    const jwt = res.headers['authorization']
                    const userInfo = res.data.data
                    //将信息存储到浏览器
                    that.$store.commit("SET_TOKEN",jwt)
                    that.$store.commit("SET_USERINFO",userInfo)
                    //得到浏览器中的数据
                    console.log(that.$store.getters.getUser)
                })
            },
            login(info){
                //表单校验
                this.$refs[info].validate((valid) =>{
                    if(valid){
                        //存储全局this
                        const that = this
                        //发送请求
                        that.$axios.post('login',that.userInfo).then(res =>{
                            //当得到请求数据是，this将会变为局部的，也就是只能this.服务器返回的数据，
                            // 不能调用全局的方法等等，所以要事先存储全局的this
                            const jwt = res.headers['authorization']
                            const userInfo = res.data.data
                            //将信息存储到浏览器
                            that.$store.commit("SET_TOKEN",jwt)
                            that.$store.commit("SET_USERINFO",userInfo)
                            //得到浏览器中的数据
                            console.log(that.$store.getters.getUser)
                        })
                    } else {
                        console.log('error submit!!')
                        return false
                    }
                })
            }
        },
    }

</script>

<style scoped>

</style>
